<template>
  <div>
    <tool-bar :title='action_name + "Git仓库"'>
      <el-button size="small" @click="deploy_click" v-if="$props.action=='edit'">去部署</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button size="small" @click="$router.push('/dev/git-data/add')" v-if="$props.action=='edit'">新建</el-button>
      <el-button size="small" @click="save_click" type="primary"> 保存</el-button>
    </tool-bar>
    <el-row type="flex" class="col-split-12">
      <el-col :span="12">
        <el-card shadow="always">

          <kv label="git地址">

            <selector
                chk="*"
                v-model="info.server.id"
                fields="id,name"
                url="/dev/git-server/list?skip=0&take=99"
                @change="server_change"/>


            <el-input type="textarea" v-model.trim="info.path"
                      chk=": if(value.startsWith('/') == false) return '必须以/开头'; if(value.toCharArray().filter(it=> it == '/') <2) return '路径不完整'; if( value.endsWith('.git') == false) return '必须以 .git 结尾';"
            />
          </kv>
          <kv label="git全地址">
            <div v-html="(info.server.url || '') + info.path" class="wrap" :key="$data.host_version">
            </div>
          </kv>
          <kv>
            <template #k>
              <div class="k">
                Access token
                <remark>
                  每个git仓库，还要单独设置 Access token <br/>
                  Gitea -> 设置 -> 应用 -> 管理access tokens <br/>
                  Gitlab -> 头像 -> Preferences -> Access tokens
                </remark>
              </div>
            </template>
            <el-input v-model="info.accessToken" type="textarea"/>
          </kv>
        </el-card>
      </el-col>
      <el-col :span="12">

        <el-card shadow="always">

          <kv label="Git名称">
            <el-input v-model.trim="info.name" chk="*"/>
          </kv>
          <kv label="类型" v-if="info.isLib">
            <div class="git-type" :class="'git-' + info.isLib">
              <label v-if="info.isLib">库</label>
              <label v-else>应用</label>
            </div>
          </kv>
          <kv label="产品线">
            <product-line v-model.trim="info.productLine.code" chk="*" @change="line_change"></product-line>

            <el-tag v-if="info?.productLine?.code" style="margin-left:6px;"> {{
                info.productLine.code
              }}
            </el-tag>
          </kv>

          <kv label="开发语言">
            <div style="display: flex;">
              <selector v-model.trim="info.language" enum="JenkinsLanguageEnum"
                        @change="language_change" chk="*"/>
              <selector v-if="info.language" style="margin-left:6px;" :enum-count="1"
                        @change="version_change"
                        v-model.trim="info.languageVersion" :data="$data.versions" chk="*"/>
            </div>
          </kv>
        </el-card>
      </el-col>
    </el-row>


    <el-card shadow="always" style="margin-top:8px;" v-if="$data.info.language">
      <java-list v-if="$data.info.language == 'Java'" v-model="$data.info"></java-list>
      <vue-list v-else-if="$data.info.language == 'Vue'" v-model="$data.info"></vue-list>
      <node-list v-else v-model="$data.info"></node-list>
    </el-card>
  </div>
</template>
<style scoped lang="scss">
.col-split-12 > .el-col:first-child {
  padding-left: 0;
}

.col-split-12 > .el-col {
  padding-left: 12px;
}
</style>
<style scoped lang="scss">
.git-type {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.git-type:after {
  content: "";
  border-radius: 3px;
  width: 28px;
  height: 28px;
  background-size: cover;
  background-image: url("../../../assets/ops/app.png");
  display: inline-block;
}

.git-type.git-true:after {
  background-image: url("../../../assets/ops/lib.png");
}
</style>
<script setup>
/**
 * Created by CodeGenerator  at 2021-02-07 18:51:27
 */
import javaList from "./java-list.vue"
import vueList from "./vue-list.vue"
import nodeList from "./node-list.vue"
import productLine from "../../../component/product-line.vue";





//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  host_version: 0,
  JenkinsLanguageEnum: jv.enum.JenkinsLanguageEnum.getData(),
  info_url: "",
  info: {
    language: "",
    server: {},
    folders: [],
    productLine: {},
    isLib: null,
    path: ""
  }, //子对象需要声明。
  gitTypes: {app: "应用", lib: "库"},
  versions: []
});
const info = $computed(() => $data.info);

const $props = defineProps({
  action: {type: String},
  isLib: {type: Boolean},
  id: {type: String}
});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

const action_name = $computed(function () {
  return {add: "添加", edit: "修改"}[$props.action]
});

const server_change = function (v, model) {
  $data.host_version++;
  $data.info.server.name = model.name;
  $data.info.server.url = model.host;

  //如果当前仓库有 accessToken 则不覆盖
  if ($props.id) {
    jv.$http.post("/dev/git-data/" + ($props.isLib ? 'lib/' : '') + "detail/" + $props.id).then(res => {
      var dbAccessToken = res.data.data.accessToken;
      if (!dbAccessToken) {
        $data.info.accessToken = model.accessToken;
      }
    });
  } else {
    $data.info.accessToken = model.accessToken;
  }

};
const language_change = function (v) {
  $data.versions = jv.ops.versions[v] || [];
};
const version_change = function (v) {
  if ($data.info.language == "Java" && v == "1.8") {
    jv.warn("Jdk1.8 将要过期, 请尽快使用 Jdk11 !")
  }
};
const line_change = function (_, model) {
  $data.info.productLine = {id: $data.info.productLine.id, code: model.code, name: model.name}
};
const loadData = function () {
  if (!$props.id) {
    $data.info.isLib = $props.isLib;
    return;
  }
  jv.$http.post("/dev/git-data/" + ($props.isLib ? 'lib/' : '') + "detail/" + $props.id).then(res => {
    $data.info = res.data.data;
    $data.info.folders.forEach(it => {
      it.cnname = it.cnname || it.name;
    })
  });
};
const save_click = function () {
//校验
  if (jv.chk_main($data) == false) {
    return;
  }
  jv.$http.post("/dev/git-data/save", $data.info).then(res => {
    jv.info(action_name + " 成功");
    if ($props.action == "add") {
      jv.$router.push("/dev/git-data/edit/" + res.data.data)
    } else if ($props.action == "edit") {
      loadData();
    }
  })
};
const deploy_click = function () {
  jv.$router.push("/ops/deploy/" + $data.info.language + "?productLineCode=" + $data.info.productLine.code + "&gitId=" + $data.info.id);
};

onMounted(function () {
  loadData();
})


</script>
